<template>
  <div class="printer-container">
    <div class="map-name">
      <el-input :class="{noBorder: isPrinting}" style="width: 200px" size="small" placeholder="请输入地图名" v-model="a"/>
      <el-button v-show="!isPrinting" type="primary" @click="printPage" size="small">打印</el-button>
    </div>
    <div class="map-wrap">
      <div id="map"></div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "index",
    data: function () {
      return {
        isPrinting: undefined,
        map: undefined,
        a:''
      }
    },
    methods: {

      printPage() {
          this.isPrinting = !this.isPrinting;
          this.$nextTick(()=>{
            window.print();
            this.isPrinting = !this.isPrinting;
          })

      }
    },
    mounted() {
      const json = window.location.href.substring(window.location.href.indexOf('=')+1);
      try{
         var param = JSON.parse(decodeURIComponent(json)) ;
         this.map = new mapboxgl.Map({
              container: 'map',
              units: 'degree',
              crs: 'EPSG:4490',
              renderWorldCopies: false,
              ...param
            });
      }catch(e){
        console.log('打印地图数据解析错误')
      }
     
    }
  }
</script>

<style lang="scss" scoped>
  .printer-container {
    width: 1000px;
    background: #fff;
    padding: 20px 15px;
    margin: 0 auto;
    position: relative;
    box-sizing: content-box;

    .footer-line {
      position: absolute;
      bottom: 0;
      left: 15px;
      width: 560px;
      border-bottom: 1px solid #ccc;
    }
    .noBorder {
      border: none;
    }

    .logo-wrap {
      margin-bottom: 20px;
      img {
        width: 70px;
        height: 35px;
      }
    }

    .map-name {
      overflow: hidden;
      .ant-btn {
        float: right;
      }
    }

    .map-wrap {
      border: 1px solid #ccc;
      margin: 20px 0;
      height: 680px;
      #map {
        width: 100%;
        height: 100%;
      }
    }

    .remark-wrap {
      background: #e8eff7;
      padding: 8px;
      overflow: hidden;
      margin-bottom: 20px;
      font-size: 13px;
      .query-holder {
        float: left;
        width: 240px;
        font-size: 13px;
        font-weight: 700;
        p {
          margin: 0;
          padding: 0;
          line-height: 22px;
        }
        label {
          color: #339fff;
          span {
            color: red;
          }
        }
        span {
          color: #333;
        }
      }
      .ant-input {
        resize: none;
        float: right;
        color: #333;
        &.coverPart {
          width: 260px;
          height: 80px;
        }
      }
    }

    .result-wrap {
      font-size: 12px;
    }
  }
</style>
